<template>
  <!-- 骨架屏 -->
  <view class="category-container" v-if="isShowSkeleton">
    <uv-skeletons :loading="isShowSkeleton" :skeleton="topSkeleton"></uv-skeletons>
    <uv-skeletons :loading="isShowSkeleton" :skeleton="subSkeletons"></uv-skeletons>
  </view>

  <view class="category-container">

    <!-- 左侧区域(一级分类)开始 -->
    <view class="left">
      <!-- #ifdef H5 -->
      <view class="top_category">
        <view v-for="(item, index) in topCategoryList" :key="item.cid"
          class="category-item ellipsis-1"
          :class="{ active: index === currentIndex }"
          @click="selectTopCategory(index)"
        >
          {{ item.name }}
        </view>
      </view>
      <!-- #endif -->

      <!-- #ifdef MP-WEIXIN -->
      <scroll-view scroll-y class="scroll-view">
        <view v-for="(item, index) in topCategoryList" :key="item.cid"
          class="category-item ellipsis-1"
          :class="{ active: index === currentIndex }"
          @click="selectTopCategory(index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>
      <!-- #endif -->
    </view>
    <!-- 左侧区域(一级分类)结束 -->


    <!-- 右侧区域(子级分类)开始 -->
    <view class="right">
      <!-- h5页面使用better-scroll插件实现滚动 -->
      <!-- #ifdef H5 -->
      <view class="sub-category-list">
        <navigator class="sub-category-item" :url="'/pagesGoods/goods_list/index?cid='+item.cid" v-for="(item, index) in subCategoryList" :key="index">
          <image class="cover" :src="global.FILE_DOMAIN + item.icon_url" v-if="item.icon_url"/>
          <image class="cover" src="@/static/images/category.png" v-else/>
          <text class="name">{{ item.name }}</text>
        </navigator>
      </view>
      <!-- #endif -->

      <!-- 非h5页面使用scroll-view实现滚动  -->
      <!-- #ifndef H5 -->
      <scroll-view
        scroll-y
        :scroll-top="scrollTop"
        :scroll-with-animation="true"
        @scroll="handleScroll"
        class="scroll-view">
        <view class="sub-category-list">
          <navigator class="sub-category-item" :url="'/pagesGoods/goods_list/goods_list?cid='+item.cid" v-for="(item, index) in subCategoryList" :key="index">
            <image class="cover" :src="global.FILE_DOMAIN + item.icon_url" v-if="item.icon_url"/>
            <image class="cover" src="@/static/images/category.png" v-else/>
            <text class="name">{{ item.name }}</text>
          </navigator>
        </view>
      </scroll-view>
      <!-- #endif -->
    </view>
    <!-- 右侧区域(子级分类)结束 -->

    <!-- 返回顶部 -->
		<TridentFreshBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
  </view>
</template>

<script setup lang="ts">
// npm install better-scroll --save

import { reactive, ref, inject } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import BScroll from 'better-scroll'

import { reqGetCategoryListAPI, reqGetCategoryTreesAPI } from '@/apis/category'
import { CategoryItem } from "@/types/home"


// h5页面使用better-scroll插件实现滚动
// #ifdef H5
// 子级分类 scroll
let subscroll:any = reactive({})
// #endif


// ------------------- 定义全局变量开始 -------------------
const global:any = inject('global')

// 定义当前索引
const currentIndex = ref(0)

// 定义子级分类
const subCategoryList:any = ref([])
// ------------------- 定义全局变量结束 -------------------


// 初始化
onLoad(async () => {
    for (let index = 0; index < 6; index++) {
      subSkeletons.push(...subSkeleton)
    }

    await getCategoryList()

    // h5页面使用 better-scroll 插件实现滚动
    // #ifdef H5
    // 一级分类 scroll
    new BScroll(document.querySelector('.left') as never, {
        probeType: 3,
        click: true,
    })

    // 子级分类 scroll
    subscroll = new BScroll(document.querySelector('.right')  as never, {
        probeType: 3,
        click: true,
    })

    // 监听滚动
    subscroll.on('scroll',(position:any) => {
        isShowBackTop.value = -position.y > 100
    })
    // #endif
})


// ----------------- 定义骨架变量开始 -----------------
// 定义是否显示骨架
const isShowSkeleton = ref(false)

// 定义骨架参数
const topSkeleton = reactive([
  {
    type: 'custom',
    num: 12,
    style: 'width: 200rpx;height: 80rpx;'
  },
])

const subSkeletons:any = reactive([])

const subSkeleton = reactive([
  {
    type: 'flex',
    num: 1,
    style: 'padding:0 10rpx;',
    children: [
      {
        type: 'custom',
        num: 1,
        style: 'width: 150rpx;height: 150rpx;marginRight: 35rpx;'
      },
      {
        type: 'custom',
        num: 1,
        style: 'width: 150rpx;height: 150rpx;marginRight: 35rpx;'
      },
      {
        type: 'custom',
        num: 1,
        style: 'width: 150rpx;height: 150rpx;'
      },
    ]
  },
  20,
  {
    type: 'flex',
    num: 1,
    style: 'padding:0 10rpx;',
    children: [
      {
        type: 'custom',
        num: 1,
        style: 'width: 150rpx;height: 60rpx;marginRight: 35rpx;'
      },
      {
        type: 'custom',
        num: 1,
        style: 'width: 150rpx;height: 60rpx;marginRight: 35rpx;'
      },
      {
        type: 'custom',
        num: 1,
        style: 'width: 150rpx;height: 60rpx;'
      },
    ]
  },
  40,
])
// ----------------- 定义骨架变量结束 -----------------


// ----------------- 返回顶部功能开始 -----------------
const scrollTop = ref(0)

// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
    // h5页面使用 better-scroll 插件实现滚动
    // #ifdef H5
    subscroll.scrollTo(0, 0, 500)
    // #endif

    // #ifndef H5
    // 视图会发生重新渲染
	scrollTop.value = scrollTop.value == 0 ? 1 : 0
    // #endif
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
// #ifndef H5
const handleScroll = (e:any) => {
  isShowBackTop.value = e.detail.scrollTop > 70 ? true : false
}
// #endif
// ----------------- 返回顶部功能结束 -----------------


// 选择顶级分类
const selectTopCategory = async (index:any) => {
  currentIndex.value = index
  // 获取子分类
  categoryTreeParams.pid = topCategoryList.value[index].cid + ''
  await getCategoryTrees()

  backTop()
  // #ifdef H5
  subscroll.refresh()
  // #endif
}


// ------------------------- 获取一级分类功能开始 -------------------------
const topCategoryList = ref<CategoryItem[]>([])
const getCategoryList = async () => {
  isShowSkeleton.value = true
  const result = await reqGetCategoryListAPI({pid: global.CID, status: 1, sort_field: 'sort', sort_type: 'asc'})
  topCategoryList.value = result.data.categories != null ? result.data.categories : []

  // 获取子分类
  categoryTreeParams.pid = topCategoryList.value[0].cid + ''
  await getCategoryTrees()
}
// ------------------------- 获取一级分类功能结束 -------------------------




// ------------------------- 获取子分类树功能开始 -------------------------
// 子分类树请求参数
const categoryTreeParams = reactive({
  pid: 'all',
  status: '1',
  is_childrens: 1,
})


// 获取子分类树
const getCategoryTrees = async () => {
  isShowSkeleton.value = true
  const result:any = await reqGetCategoryTreesAPI(categoryTreeParams)
  subCategoryList.value = result.data.categories != null ? result.data.categories : []
  isShowSkeleton.value = false
}
// ------------------------- 获取子分类树功能结束 -------------------------
</script>

<style scoped lang="scss">
.category-container {
  display: flex;
  // h5页面使用better-scroll插件实现滚动
  /* #ifdef H5 */
  height: calc(100vh - 170rpx);
  /* #endif */
  // 左侧区域、一级分类
  .left {
    width: 200rpx;
    border-right: 4rpx solid #ccc;
    // h5页面使用better-scroll插件实现滚动
    /* #ifdef H5 */
    height: calc(100vh - 170rpx);
    /* #endif */
    overflow: hidden;
    .top_category {
      .category-item {
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-left: 4rpx solid transparent;
        padding: 0 20rpx;
      }
      .active {
        background-color: #fff;
        border-left: 4rpx solid #008000;
        color: #008000;
      }
    }

    .scroll-view {
      height: 100vh;
      .category-item {
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-left: 4rpx solid transparent;
        padding: 0 20rpx;
      }
      .active {
        background-color: #fff;
        border-left: 4rpx solid #008000;
        color: #008000;
      }
    }
  }

  // 右侧区域、子级分类
  .right {
    flex: 1;
    background-color: #fff;
    // h5页面使用 better-scroll 插件实现滚动
    /* #ifdef H5 */
    height: calc(100vh - 170rpx);
    /* #endif */
    overflow: hidden;
    // 非h5页面使用 scroll-view 插件实现滚动
    /* #ifndef H5 */
    .scroll-view {
      height: 100vh;
    /* #endif */
      .sub-category-list {
        display: flex;
        flex-wrap: wrap;
        padding: 20rpx 10rpx 0 10rpx;

        .sub-category-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 175rpx;
          margin-bottom: 40rpx;

          &:nth-child(3n) {
            margin-right: 0;
          }
          &:last-child {
            margin-right: 0;
          }
          .cover {
            width: 140rpx;
            height: 140rpx;
            margin-bottom: 10rpx;
          }
          .name {
            font-size: 24rpx;
          }
        }
      }
    /* #ifndef H5 */
    }
    /* #endif */
  }
}
</style>